<template>
  <div class="class-manage">
    <header class="class-manage__header">
      <img
        class="back-icon"
        @click="goBack"
        src="@/assets/images/common/go-back.png"
      />
      <ul class="tabs">
        <li
          class="tab-item"
          v-for="item in TABS"
          :key="item.id"
          :class="{ active: activeTab === item.id }"
          @click="changeTab(item.id, item.path)"
        >
          {{ item.name }}
        </li>
      </ul>
    </header>
    <main class="class-manage__main">
      <router-view></router-view>
    </main>
  </div>
</template>
<script>
export default {
  // 记录进入班级管理前的路由，用于返回
  beforeRouteEnter(_, from) {
    sessionStorage.setItem('ai-learn-class-manage-from', from.fullPath)
  }
}
</script>
<script setup>
import { useRouter, useRoute, onBeforeRouteLeave } from 'vue-router'
import { ref, watch, computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useAuthStore } from '@/stores'
const authStore = useAuthStore()
const { nowIsSmartRoomCode } = storeToRefs(authStore)

const router = useRouter()
const route = useRoute()
const TABS = computed(() => {
  if (nowIsSmartRoomCode.value) {
    return [
      {
        name: '爱学班',
        id: 'administration',
        path: '/classManage/administration'
      },
      {
        name: '靶向班',
        path: '/classManage/target',
        id: 'target'
      }
    ]
  } else
    return [
      {
        name: '行政班',
        id: 'administration',
        path: '/classManage/administration'
      },
      {
        name: '教学班',
        id: 'teaching',
        path: '/classManage/teaching'
      },
      {
        name: '靶向班',
        path: '/classManage/target',
        id: 'target'
      }
    ]
})

const activeTab = ref('administration')
const changeTab = (id, path) => {
  activeTab.value = id
  router.push(path)
}

watch(
  () => route.path,
  val => {
    activeTab.value = TABS.value.find(item => val.indexOf(item.id) > -1).id
  },
  {
    immediate: true
  }
)

const goBack = () => {
  const routeFrom = sessionStorage.getItem('ai-learn-class-manage-from')
  if (routeFrom) {
    router.push(routeFrom)
  } else {
    router.go(-1)
  }
}

// 离开班级管理路由清除缓存
onBeforeRouteLeave(() => {
  sessionStorage.removeItem('ai-learn-class-manage-from')
  sessionStorage.removeItem('ai-learn-class-manage-classId')
})
</script>
<style lang="less" scoped>
.class-manage {
  height: 95vh;
  display: flex;
  flex-direction: column;
  gap: 12px;

  &__header {
    display: flex;
    align-items: center;
    gap: 60px;

    .back-icon {
      width: 13px;
      cursor: pointer;
    }

    .tabs {
      display: flex;
      gap: 40px;
      margin: unset;

      .tab-item {
        cursor: pointer;
        color: #040b1a66;
        font-size: 24px;

        &.active {
          color: @color-brand-regular;
          font-weight: 700;
        }
      }
    }
  }

  &__main {
    padding: 20px 63px;
    border-radius: 15px;
    flex: 1;
    background: #fff;
    overflow-y: auto;
  }
}
</style>
